終於要來組合畫面嚕～
寫了這麼多天的小區塊切版，
終於要派上用場了！
是不是常常有一種：「我想要學的是整個網頁的切版，不是這種小區塊！」的吶喊啊？
其實小區塊切得好，切版就不會是一件很難開頭的事情。

講解一下我規劃的架構是如何：

• header - Day 11 | 我包你啊你包我 - 多層次選單
• banner - Day 06 | 就是那麼有層次 - 多重背景
• about - Day 15 | 我的歷史成就你的現在 - 時間軸
• member - Day 21 | 這些人都是我的小弟...是員工 - 人員介紹卡片
• service - Day 14 | 錯綜複雜的交錯漂浮版
• project - Day 20 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 2
• contact - Day 25 | 不是古代的那種翻牌 - 翻牌效果
• footer - Day 23 | 是最後，但不是結束 - 頁尾

先放一下整個頁面會長如何好了，
因為時間有限，
我就沒有考量 RWD，
是以固定尺寸來進行製作的。

( banner 背景圖 Edan Cohen from Unsplash )

我其實有點不太確定要怎麼樣提供我的檔案，
總覺得整個都貼上好像有點太冗了，
今天就先分享我 HTML 的 codepen 好了，
明天分享加上 CSS 的模樣。

codepen（有沒有那種看到很早期網頁的感覺）

一般我的結構起手式都會長這樣，
沒有用 main 是因為他的支援度的問題（又是 IE）。

<header></header>
<div class="main"></div>
<footer></footer>

HTML 結構

有共用的就會有同一個 class，
畢竟網頁內容滿多都是模組化的概念，
這樣可以一起設定，
要做變更的時候你就會感激自己當初規劃的很好。

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天繼續組合畫面～